<template>
    <div class="install-drawer">
        <button class="reset" type="button" @click="OnChanged">
            <img :src="state ? `/static/Lidar/ic_shouqi2.png` : `/static/Lidar/ic_zhankai2.png`">
            <span>零件库</span>
        </button>

        <i></i>

        <div ref="container" class="part-container">
            <template v-for="[id, information] of InteractableObjectComponent.Default.Informations" :key="id">
                <input type="checkbox" name="安装零件库" :id="'安装零件库' + information.Id" hidden :value="id"
                    v-model="InteractableObjectComponent.Default.Choices.value">
                <label :for="'安装零件库' + id">
                    <img :src="`/static/Lidar/${information.Name}.png`" :alt="information.Name">
                    <button class="reset" type="button" v-show="InstallComponent.Default.CanRecyclePart.value && InteractableObjectComponent.Default.Choices.value.includes(id)"
                        @click="InstallComponent.Default.RecycleAsync(id, information.InstanceId)"></button>
                    <span :title="information.Name">{{ information.Name }}</span>
                </label>
            </template>
        </div>

        <!-- <div class="button-container" v-show="InteractableObjectComponent.Default.Choices.value.length > 0">
            <button class="reset" type="button" @click="OnNavigateTo(-1)" v-show="canNavigateToPrevious"></button>
            <button class="reset" type="button" @click="OnNavigateTo(1)" v-show="canNavigateToNext"></button>
        </div> -->

        <div class="button-container" v-show="InteractableObjectComponent.Default.Informations.size > 0">
            <button class="reset" type="button" @click="OnNavigateTo(-1)"></button>
            <button class="reset" type="button" @click="OnNavigateTo(1)"></button>
        </div>

        <div class="indicator-container">
            <span v-for="([id, information], index) of InteractableObjectComponent.Default.Informations" :key="id"
                :indicator="IsIndicator(index)" @click="OnJumpTo(index)">
            </span>
        </div>
    </div>
</template>

<script setup lang="ts">
import InteractableObjectComponent from '@runtime/UnityEngineBridge/InteractableObjectComponent';
import { computed, Ref, ref } from 'vue';
import { InstallComponent } from './LidarComponent';

const state = ref(true);

const container: Ref<HTMLDivElement | null> = ref(null);

const canNavigateToPrevious = computed(() => {
    if (InteractableObjectComponent.Default.Choices.value.length == 0) {
        return false;
    }

    const id = InteractableObjectComponent.Default.Choices.value[0];
    const index = Array.from(InteractableObjectComponent.Default.Informations.keys()).indexOf(id);
    return index > 0;
});

const canNavigateToNext = computed(() => {
    if (InteractableObjectComponent.Default.Choices.value.length == 0) {
        return false;
    }

    const id = InteractableObjectComponent.Default.Choices.value[0];
    const index = Array.from(InteractableObjectComponent.Default.Informations.keys()).indexOf(id);
    return index < InteractableObjectComponent.Default.Count - 1;
});

const sidebarTranslate = ref('translate(-50%, 0)');
const buttonBackground = ref('transparent');
const buttonTranslateY = ref('translateX(0)');

function OnChanged() {
    state.value = !state.value;
    sidebarTranslate.value = state.value ? 'translate(-50%, 0)' : 'translate(-50%, 100%)';
    buttonBackground.value = state.value ? 'transparent' : '#131620';
    buttonTranslateY.value = state.value ? 'translateY(0)' : 'translateY(-5rem)';
}

function OnNavigateTo(delta: number): void {
    const labels = Array.from(container.value?.children ?? []).filter(element => element.tagName == 'LABEL') as Array<HTMLLabelElement>;

    if (InteractableObjectComponent.Default.Choices.value.length == 0) {
        // labels[0].click();
        // labels[0].scrollIntoView();
    } else {
        const id = InteractableObjectComponent.Default.Choices.value[0];
        const index = Array.from(InteractableObjectComponent.Default.Informations.keys()).indexOf(id) + delta;
        if (index > -1 && index < InteractableObjectComponent.Default.Count) {
            labels[index].click();
            labels[index].scrollIntoView();
        }
    }
}

function OnJumpTo(index: number): void {
    const labels = Array.from(container.value?.children ?? []).filter(element => element.tagName == 'LABEL') as Array<HTMLLabelElement>;
    labels[index].click();
    labels[index].scrollIntoView();
}

function IsIndicator(index: number): boolean {
    const id = InteractableObjectComponent.Default.Choices.value.length == 0 ? -1 : InteractableObjectComponent.Default.Choices.value[0];
    return index == Array.from(InteractableObjectComponent.Default.Informations.keys()).indexOf(id);
}
</script>

<style scoped>
.install-drawer {
    position: absolute;
    left: 50%;
    bottom: 0;

    transform: translate(-50%, );

    width: 97rem;
    height: 24rem;

    background-color: #131620;
    border-radius: 2rem 2rem 0 0;

    transform: v-bind(sidebarTranslate);

    transition: transform 300ms;
}

i {
    position: absolute;
    top: 0;
    left: 16rem;

    display: block;
    width: calc(100% - 16rem);
    height: 7rem;

    border-right: solid 0.6rem transparent;
    border-top: solid 0.6rem transparent;
    border-radius: 0 2rem 0 0;
    background-image: linear-gradient(#131620, #131620),
        linear-gradient(90deg, #218cde, #807de1);
    background-origin: border-box;
    background-clip: content-box, border-box;

    z-index: -1;
}

.install-drawer>button {
    width: 13rem;
    height: 5rem;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    background-color: v-bind(buttonBackground);

    border-radius: 2rem 2rem 0 0;

    transform: v-bind(buttonTranslateY);

    transition: transform 300ms;

    cursor: pointer;
}

.install-drawer>button>span {
    color: #81859C;
    font-size: 1.8rem;
    font-weight: 500;
}

.button-container {
    position: absolute;
    top: 10rem;

    width: 100%;

    padding: 0 2rem;

    pointer-events: none;
}

.button-container>button {
    width: 4rem;
    height: 4rem;
    background-repeat: no-repeat;

    pointer-events: initial;

    cursor: pointer;
}

.button-container>button:first-of-type {
    background-image: url('/static/Lidar/ic_previous_2.png');
}

.button-container>button:first-of-type:hover {
    background-image: url('/static/Lidar/ic_previous_2_hover.png');
}

.button-container>button:last-of-type {
    float: right;
    background-image: url('/static/Lidar/ic_next_2.png');
}

.button-container>button:last-of-type:hover {
    background-image: url('/static/Lidar/ic_next_2_hover.png');
}

.part-container {
    position: absolute;
    top: 7rem;

    max-width: calc(100% - 14rem);

    margin-left: 7rem;

    display: flex;
    justify-content: flex-start;
    gap: 2rem;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    overflow: hidden;
}

.part-container>label {
    position: relative;

    width: 15rem;
    height: 13rem;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    scroll-snap-align: start;
}

.part-container>label>img {
    width: 15rem;
    height: 10rem;

    border-radius: 1rem;
    border: solid 0.2rem transparent;
    background-color: #212336;

    object-fit: contain;
}

.part-container>label>button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;

    width: 3.2rem;
    height: 3.2rem;

    background-repeat: no-repeat;
    background-position: center center;

    cursor: pointer;
}

.part-container>input:checked+label>button {
    background-image: url('/static/Lidar/ic_fanghuilingjian.png');
}

.part-container>label>span {
    color: #81859C;
    font-size: 1.6rem;
}

.part-container>input:checked+label>img {
    background-image: linear-gradient(#212336, #212336),
        linear-gradient(90deg, #218cde, #807de1);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.part-container>input:hover+label>span {
    color: white;
}

.indicator-container {
    position: absolute;
    bottom: 2rem;

    width: 100%;

    pointer-events: none;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.indicator-container>span {
    display: block;
    width: 1rem;
    height: 0.4rem;

    background-color: #81859C;

    border-radius: 0.2rem;

    transition: all 300ms;

    pointer-events: initial;

    cursor: pointer;
}

.indicator-container>span[indicator=true] {
    width: 2rem;
    background-color: #A2A2FF;
}

label>span {
    max-width: 100%;

    color: white;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>./LidarComponent